<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">
                <i class="fa fa-hand-peace-o tlp-pane-title-icon"></i> A pane with cards
            </h1>
        </div>
        <section class="tlp-pane-section-for-cards">
            <a class="tlp-card tlp-card-selectable" href="javascript:;">
                This is the content of My card.
            </a>
            <a class="tlp-card tlp-card-selectable" href="javascript:;">
                This is the content of My card.
            </a>
            <a class="tlp-card tlp-card-inactive tlp-card-selectable" href="javascript:;">
                This is a closed card.
            </a>
            <div class="tlp-card tlp-card-selectable" href="javascript:;">
                And this is the content of another card.
            </div>
        </section>
    </div>
</section>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h1 class="tlp-pane-title">
                <i class="fa fa-hand-spock-o tlp-pane-title-icon"></i> A pane with cards under tabs
            </h1>
        </div>
        <nav class="tlp-tabs">
            <a href="javascript:;" class="tlp-tab">Overview</a>
            <a href="javascript:;" class="tlp-tab tlp-tab-active">Comments</a>
            <a href="javascript:;" class="tlp-tab">History</a>
        </nav>
        <section class="tlp-pane-section-for-cards-under-tabs">
            <a class="tlp-card tlp-card-selectable" href="javascript:;">
                This is the content of My card.
            </a>
            <a class="tlp-card tlp-card-selectable" href="javascript:;">
                This is the content of My card.
            </a>
            <a class="tlp-card tlp-card-inactive tlp-card-selectable" href="javascript:;">
                <p class="tlp-text-muted">This is an inactive card.</p>
            </a>
            <a class="tlp-card tlp-card-inactive tlp-card-selectable" href="javascript:;">
                <p class="tlp-text-muted">This is an inactive card.</p>
            </a>
            <a class="tlp-card tlp-card-inactive tlp-card-selectable" href="javascript:;">
                <p class="tlp-text-muted">This is an inactive card.</p>
            </a>
            <div class="tlp-card tlp-card-selectable" href="javascript:;">
                And this is the content of another card.
            </div>
        </section>
    </div>
</section>
